//tab配置
export type TTabCode = 'baseComponent';
export interface TtabchildrenItem {
  uuid?: string;
  tabchildrenName?: string;
  tabchildrencode?: string;
  tabchildrencomponentCodeList?: string[];
  tabcomponentList?: TcomponentItem[];
}
export interface TtabItem {
  name?: string; //tab的名称
  code?: string; //tab的唯一code
  componentCodeList?: string[]; //tab下的控件code列表，根据这个渲染tab下的控件
  tabchildren?: TtabchildrenItem[];
  componentList?: TcomponentItem[];
}

//控件配置
export interface TcomponentItem {
  // ctlCnName?: string;
  uuid?: string;
  componentName?: string; //控件的名称
  enName?: string; //控件的英文名称
  componentType?: string; //控件的类型
  code?: string; //控件的唯一code
  fieldName?: string; // 具体控件的名称
  showFieldList?: string[]; //该控件可修改的props字段
  icon?: string; //控件的icon
  props?: any; //对象 props的默认值
  ifAdd?: 1; //是1否0自建
  del?: boolean;
  values?: any;
  childrenCtl?: any[];
}
import { GetBusinessModalData } from '@/apis/controltotal/index';
import type { Data, Child } from '@/apis/controltotal/type';

/**
 * 获取控件总集数据
 * @param code  传入的业务功能编码
 * @returns
 */
export async function loadControl(code?: string | string[]) {
  if (!code) return null;
  const res: Promise<Data>[] = [];
  if (Array.isArray(code)) {
    code.forEach(async (ele) => {
      res.push(GetBusinessModalData({ funcCode: ele }));
    });
  } else {
    res.push(GetBusinessModalData({ funcCode: code }));
  }
  return await Promise.all(res);
}

export const tabList: TtabItem[] = [
  {
    name: '基础控件',
    code: 'baseComponent',
    componentCodeList: [
      'TEXT',
      'TEXT_AREA',
      'TEXT_NUMBER',
      'DATE',
      'DATE_WEEK',
      'DATE_MONTH',
      'DATE_YEAR',
      'DATE_QUARTER',
      'DATE_RANGE',
      'SELECT',
      'RADIO',
      'CHECK_BOX',
      'SINGLE_FILE',
      'MULTI_FILE',
      'SINGLE_PICTURE',
      'MULTI_PICTURE',
      'PROMOTION',
      'BUTTON'
    ]
  }
];
export const componentList: TcomponentItem[] = [
  {
    ctlCnName: '单行文本',
    componentName: '单行文本',
    componentType: 'TEXT',
    code: 'TEXT',
    del: true,
    icon: 'icon-danhangwenben',
    showFieldList: ['validate', 'textMax', 'placeholder'],
    props: {
      placeholder: '请输入文字'
    },
    fieldName: 'text',
    ifAdd: 1
  },
  {
    componentName: '多行文本',
    componentType: 'TEXT_AREA',
    code: 'TEXT_AREA',
    del: true,
    icon: 'icon-duohangwenben',
    showFieldList: ['textMax', 'placeholder'],
    fieldName: 'textArea',
    props: {
      placeholder: '请输入文字'
    },
    ifAdd: 1
  },
  {
    componentName: '数字',
    del: true,
    componentType: 'TEXT_NUMBER',
    code: 'TEXT_NUMBER',
    icon: 'icon-fuhao-shuzishurukuang',
    showFieldList: ['textMax', 'placeholder'],
    fieldName: 'number',
    props: {
      placeholder: '请输入数字'
    },
    ifAdd: 1
  },

  {
    componentName: '日期',
    del: true,
    componentType: 'DATE',
    code: 'DATE',
    icon: 'icon-riqi',
    showFieldList: ['placeholder', 'dateFormat', 'showTime'],
    fieldName: 'date',
    props: {
      placeholder: '请输入日期',
      dateFormat: 'YYYY-MM-DD HH:mm:ss', // 时间格式
      showTime: true, // 是否为带日期的选择器
      valueFormat: 'x' // 传给后端的时间格式(默认为时间戳)
    },
    ifAdd: 1
  },
  {
    componentName: '日期(周)',
    del: true,
    componentType: 'DATE',
    code: 'DATE_WEEK',
    icon: 'icon-riqi',
    showFieldList: ['placeholder'],
    fieldName: 'dateWeek',
    props: {
      placeholder: '请输入日期',
      valueFormat: 'x' // 传给后端的时间格式(默认为时间戳)
    },
    ifAdd: 1
  },
  {
    componentName: '日期(月)',
    del: true,
    componentType: 'DATE',
    code: 'DATE_MONTH',
    icon: 'icon-riqi',
    showFieldList: ['placeholder'],
    fieldName: 'dateMonth',
    props: {
      placeholder: '请输入日期',
      dateFormat: 'YYYY-MM-DD HH:mm:ss', // 时间格式
      showTime: true, // 是否为带日期的选择器
      valueFormat: 'x' // 传给后端的时间格式(默认为时间戳)
    },
    ifAdd: 1
  },
  {
    componentName: '日期(年)',
    del: true,
    componentType: 'DATE',
    code: 'DATE_YEAR',
    icon: 'icon-riqi',
    showFieldList: ['placeholder'],
    fieldName: 'dateYear',
    props: {
      placeholder: '请输入日期',
      valueFormat: 'x' // 传给后端的时间格式(默认为时间戳)
    },
    ifAdd: 1
  },
  {
    componentName: '日期(季度)',
    del: true,
    componentType: 'DATE',
    code: 'DATE_QUARTER',
    icon: 'icon-riqi',
    showFieldList: ['placeholder'],
    fieldName: 'dateQuarter',
    props: {
      placeholder: '请输入日期',
      valueFormat: 'x' // 传给后端的时间格式(默认为时间戳)
    },
    ifAdd: 1
  },

  {
    componentName: '日期范围',
    del: true,
    componentType: 'DATE',
    code: 'DATE_RANGE',
    icon: 'icon-shijian',
    showFieldList: ['placeholder', 'dateFormat', 'showTime'],
    fieldName: 'dateRange',
    props: {
      placeholder: '请输入日期',
      format: 'YYYY-MM-DD HH:mm:ss', // 时间格式
      showTime: true, // 带日期的选择器
      valueFormat: 'x' // 传给后端的时间格式(默认为时间戳)
    },
    ifAdd: 1
  },
  {
    componentName: '下拉选择框',
    del: true,
    componentType: 'SELECT',
    code: 'SELECT',
    icon: 'icon-biaodanzujian-xialakuang',
    showFieldList: ['placeholder', 'selectOptions'],
    fieldName: 'select',
    props: {},
    ifAdd: 1
  },
  {
    componentName: '单选框',
    componentType: 'RADIO',
    code: 'RADIO',
    icon: 'icon-danxuankuang',
    showFieldList: ['placeholder', 'radioOptions'],
    fieldName: 'radio',
    props: {},
    del: true,
    ifAdd: 1
  },
  {
    componentName: '多选框',
    componentType: 'CHECK_BOX',
    code: 'CHECK_BOX',
    icon: 'icon-duoxuankuang',
    showFieldList: ['max', 'checkBoxOptions'],
    fieldName: 'checkBox',
    props: {
      // options:{}
    },
    del: true,
    ifAdd: 1
  },
  {
    componentName: '单文件上传',
    componentType: 'FILE',
    code: 'SINGLE_FILE',
    icon: 'icon-fujian',
    showFieldList: ['placeholder'],
    fieldName: 'singleFile',
    props: {},
    del: true,
    ifAdd: 1
  },
  {
    componentName: '多文件上传',
    componentType: 'FILE',
    code: 'MULTI_FILE',
    icon: 'icon-fujian',
    showFieldList: ['placeholder'],
    fieldName: 'multiFile',
    props: {},
    del: true,
    ifAdd: 1
  },
  {
    componentName: '单图片上传',
    componentType: 'FILE',
    code: 'SINGLE_PICTURE',
    icon: 'icon-tupian',
    showFieldList: ['placeholder'],
    fieldName: 'singlePicture',
    props: {},
    del: true,
    ifAdd: 1
  },
  {
    componentName: '多图片上传',
    componentType: 'FILE',
    code: 'MULTI_PICTURE',
    icon: 'icon-tupian',
    showFieldList: ['placeholder'],
    fieldName: 'multiPicture',
    props: {},
    del: true,
    ifAdd: 1
  },
  {
    componentName: '文件',
    componentType: 'FILE_UPLOAD',
    code: 'FILE_UPLOAD',
    icon: 'icon-fujian',
    showFieldList: ['placeholder'],
    fieldName: 'fileUpload',
    props: {},
    del: true,
    ifAdd: 1,
    values: 'sdfsdf'
  },
  {
    componentName: '晋升图',
    componentType: 'PROMOTION',
    code: 'PROMOTION',
    icon: 'icon-fujian',
    showFieldList: ['placeholder'],
    fieldName: 'promotion',
    props: {},
    del: true,
    ifAdd: 1,
    values: ['职位名称']
  },
  {
    componentName: '表格明细',
    enName: '',
    componentType: 'DETAIL_TABLE',
    fieldName: '',
    code: 'DETAIL_TABLE',
    icon: 'icon-biaoge',
    showFieldList: ['detailTable'],
    props: {
      layout: 1, // 1表格布局2表单布局
      showRadar: 2 // 启用图标（雷达图）
    },
    childrenCtl: [],
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '按钮',
    enName: '',
    componentType: 'BUTTON',
    fieldName: '',
    code: 'BUTTON',
    icon: 'icon-biaoge',
    showFieldList: ['button'],
    props: {
      /**
       * 跳转连接地址
       */
      url: '',
      /**
       * 隐藏标题
       */
      hideTitle: 1
    },
    enable: 1,
    required: 2,
    isDefault: 2
  }
];

export async function init(code?: string | string[]) {
  if (!code) return null;
  const res = await loadControl(code);
  if (!res) return null;
  const tabData = newdisposeData(res);
  return tabData;
}

export function newdisposeData(data?: Data[]) {
  if (!data) return null;
  const res: TtabItem[] = [];
  data.forEach((ele) => {
    if (!ele.funcCtlInfos?.children) return;
    const children = ele.funcCtlInfos.children;
    const tabItem: TtabItem = { componentList: [], tabchildren: [] };
    const { name, funcCode } = ele.funcCtlInfos;
    tabItem.code = funcCode as string;
    tabItem.name = name as string;
    children.forEach((item, ind) => {
      delete item?.id;
      if (item) {
        const { componentList, tabchildren } = disposeChildren(item, ind);
        if (tabItem?.componentList && tabItem.tabchildren) {
          componentList ? tabItem?.componentList.push(componentList) : null;
          tabchildren ? tabItem.tabchildren.push(tabchildren) : null;
        }
      }
    });

    res.push(tabItem);
  });
  console.log('222222222', res);

  return res;
}

function disposeChildren(item: Child, ind: number) {
  const data: {
    componentList?: TcomponentItem;
    tabchildren?: TtabchildrenItem;
  } = {};
  // ctlDetail存在时 处理ctlDetail存在时里面的数据
  if (item.ctlDetail?.ctlCode) {
    const { cnName, componentType, ctlCode, props } = item.ctlDetail;
    data.componentList = {
      uuid: ctlCode as string,
      componentName: cnName as string,
      // componentType: componentType as string,
      fieldName: cnName as string,
      code: ctlCode as string,
      // props: props as string
      ...item.ctlDetail
    };
  }
  // subDetail存在时 处理subDetail存在时里面的数据
  if (item.subDetail?.subRelDetail) {
    const subDetail = item.subDetail;
    const { cnName, subCode, enName } = subDetail;
    data.tabchildren = {
      tabchildrcnName: cnName as string,
      tabchildrenName: enName as string,
      tabchildrencode: subCode as string,
      tabcomponentList: []
    };
    subDetail.subRelDetail.forEach((subRelDetail, ind) => {
      if (!subRelDetail) return;
      const {
        ctlCnName,
        ctlEnName,
        ctlComponentType,
        ctlCode,
        props,
        ctlFieldName
      } = subRelDetail;
      delete subRelDetail.id;
      subRelDetail?.childrenCtl?.forEach((item) => {
        item.uuid = item.ctlCode;
      });
      data.tabchildren?.tabcomponentList?.push({
        uuid: ctlCode as string,
        componentName: ctlCnName as string,
        componentType: ctlComponentType as string,
        code: ctlCode as string,
        fieldName: ctlFieldName as string,
        enName: ctlEnName as string,
        // props: props as string,
        ...subRelDetail
      });
    });
  }

  return data;
}
